import type { StoryObj, Meta } from '@storybook/react'
import Menu from './index'
import MenuItem from './menuItem'
import SubMenu from './subMenu'
import { fn } from '@storybook/test'
// 定义组件的元数据
const menuMeta = {
  title: 'Components/Menu',
  component: Menu,
  // 子组件
  subcomponents: { MenuItem: MenuItem, SubMenu: SubMenu },
  tags: ['autodocs'], // 自动生成文档
  args: {
    onSelect: fn()
  },
  parameters: {
    layout: 'centered', // 设置文档的布局
    docs: {
      description: {
        component: '菜单组件'
      }
    }
  },
  // 设置参数表格
  argTypes: {
    defaultIndex: {
      control: 'text', // 控制类型
      description: '默认选中的菜单项的索引值'
    }
  }
} as Meta<typeof Menu>
// satisfies 用于类型断言
export default menuMeta
type Story = StoryObj<typeof menuMeta> // 定义组件的默认参数

export const DefaultMenu: Story = {
  args: {
    defaultIndex: '0',
    mode: 'vertical'
  },
  render: (args) => (
    <Menu {...args}>
      <Menu.Item>cool link</Menu.Item>
      <Menu.Item>cool link 2</Menu.Item>
      <Menu.Item disabled>disabled</Menu.Item>
      <Menu.SubMenu title="下拉选项">
        <Menu.Item>下拉选项一</Menu.Item>
        <Menu.Item>下拉选项二</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  )
}

export const BClickMenu: Story = (args) => (
  <Menu {...args} defaultIndex="0" mode="vertical">
    <Menu.Item>cool link</Menu.Item>
    <Menu.Item>cool link 2</Menu.Item>
    <Menu.SubMenu title="点击下拉选项">
      <Menu.Item>下拉选项一</Menu.Item>
      <Menu.Item>下拉选项二</Menu.Item>
    </Menu.SubMenu>
  </Menu>
)
BClickMenu.storyName = '纵向的 Menu'
export const COpenedMenu: Story = (args) => (
  <Menu {...args} defaultIndex="0" mode="vertical" defaultOpenSubMenus={['2']}>
    <Menu.Item>cool link</Menu.Item>
    <Menu.Item>cool link 2</Menu.Item>
    <Menu.SubMenu title="默认展开下拉选项">
      <Menu.Item>下拉选项一</Menu.Item>
      <Menu.Item>下拉选项二</Menu.Item>
    </Menu.SubMenu>
  </Menu>
)
COpenedMenu.storyName = '默认展开的纵向 Menu'
